{% extends "mail/mailindex.html" %}

{% block detail %}

    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js"></script>
    <script type="text/javascript" src="/static/js/map/china.js"></script>

    {#内容#}
    <div class="row">
        <div class="col-lg-5">
            <div class="panel panel-primary" style="box-shadow: #c6c6c6 0px 0px 5px 5px">
                <div class="panel-heading">寄件目的地分布图</div>
                <div class="panel-body" style="height: 660px;">
                    <div id="mail_map" style="width:100%; height:620px;">

                        <script>
                            $(function () {
                                    var hoststr = window.location.host
                                    var chart = echarts.init(document.getElementById('mail_map'), 'white', {renderer: 'canvas'});
                                    var url = "http://" + hoststr + "/mail/api_mail_map?date=" + "{{ datestr }}";
                                    $.ajax({
                                        type: "GET",
                                        url: url,
                                        dataType: 'json',
                                        success: function (result) {
                                            chart.setOption(result);
                                        }
                                    });
                                }
                            )
                        </script>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-primary" style="box-shadow: #c6c6c6 0px 0px 5px 5px">
                        <div class="panel-heading">各部门寄件数汇总</div>
                        <div class="panel-body" style="height: 300px;">
                            <div id="mail_bm_bar" style="width:100%; height:280px;">

                                <script>
                                    $(function () {
                                            var hoststr = window.location.host
                                            var chart = echarts.init(document.getElementById('mail_bm_bar'), 'white', {renderer: 'canvas'});
                                            var url = "http://" + hoststr + "/mail/api_mail_bm_bar?date=" + "{{ datestr }}";
                                            $.ajax({
                                                type: "GET",
                                                url: url,
                                                dataType: 'json',
                                                success: function (result) {
                                                    chart.setOption(result);
                                                }
                                            });
                                        }
                                    )
                                </script>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
             <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-primary" style="box-shadow: #c6c6c6 0px 0px 5px 5px">
                        <div class="panel-heading">寄件目的地汇总</div>
                        <div class="panel-body" style="height: 300px;">
                            <div id="mail_dq_bar" style="width:100%; height:280px;">

                                <script>
                                    $(function () {
                                            var hoststr = window.location.host
                                            var chart = echarts.init(document.getElementById('mail_dq_bar'), 'white', {renderer: 'canvas'});
                                            var url = "http://" + hoststr + "/mail/api_mail_dq_bar?date=" + "{{ datestr }}";
                                            $.ajax({
                                                type: "GET",
                                                url: url,
                                                dataType: 'json',
                                                success: function (result) {
                                                    chart.setOption(result);
                                                }
                                            });
                                        }
                                    )
                                </script>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}